/*
  学习目标：useEffect模拟声明周期 - 挂载后、更新后
  语法： 
  1. useEffect(() => {}, [])
  2. useEffect(() => {}, [依赖项])
*/

import { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('~');

  // 👍useEffect第二个参数，是空数组： 挂载后
  useEffect(() => {
    document.title = count;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 👍useEffect第二个参数，[依赖项]： 挂载 更新二合一
  // 类似vue中watch， 开启了immediately
  useEffect(() => {
    console.log('123  ----->  ', 123);
  }, [count]);

  // 👎useEffect不写第二个参数： 挂载 更新二合一
  // 💥会监所有的依赖项变化，可能造成性能浪费
  // useEffect(() => {
  //   console.log('123  ----->  ', 123);
  // });
  return (
    <div>
      <h1>{count}</h1>
      <h1>{msg}</h1>
      <button onClick={() => setCount(count + 1)}>点我</button>
      <button onClick={() => setMsg(msg + '~')}>点我 ~</button>
    </div>
  );
}
